<html lang="en">

<head>
  <style>
    html {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
    }

    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      background-color: rgb(54, 50, 119);
      align-items: center;
      justify-content: center;
      color: #fafafa;
    }

    .loading {
      text-align: center;
    }
  </style>

</head>

<body>
  <div class="loading">
    <div>
      <img
        src="" />
      <img
        src="" />
    </div>
    <h3>Loading &laquo; table - complete &raquo; demo</h3>
  </div>
  <form id="mainForm" method="post" action="https://stackblitz.com/run?file=app/table-complete.ts" target="_self">
    <input type="hidden" name="project[template]" value="angular-cli">
    <input type="hidden" name="project[title]" value="ng-bootstrap - Table - Complete">
    <input type="hidden" name="project[description]"
      value="Example usage of the table widget from https://ng-bootstrap.github.io">
    <input type="hidden" name="project[dependencies]" value="{&#34;@angular/animations&#34;:&#34;~13.0.1&#34;,&#34;@angular/core&#34;:&#34;~13.0.1&#34;,&#34;@angular/common&#34;:&#34;~13.0.1&#34;,&#34;@angular/compiler&#34;:&#34;~13.0.1&#34;,&#34;@angular/compiler-cli&#34;:&#34;~13.0.1&#34;,&#34;@angular/platform-browser&#34;:&#34;~13.0.1&#34;,&#34;@angular/platform-browser-dynamic&#34;:&#34;~13.0.1&#34;,&#34;@angular/router&#34;:&#34;~13.0.1&#34;,&#34;@angular/forms&#34;:&#34;~13.0.1&#34;,&#34;@angular/localize&#34;:&#34;~13.0.1&#34;,&#34;@ng-bootstrap/ng-bootstrap&#34;:&#34;12.1.2&#34;,&#34;@popperjs/core&#34;:&#34;^2.10.2&#34;,&#34;rxjs&#34;:&#34;~7.4.0&#34;,&#34;typescript&#34;:&#34;~4.4.4&#34;,&#34;zone.js&#34;:&#34;~0.11.4&#34;}">
    
    <input type="hidden" name="project[tags][]" value="angular">
    
    <input type="hidden" name="project[tags][]" value="bootstrap">
    
    <input type="hidden" name="project[tags][]" value="ng-bootstrap">
    
    <input type="hidden" name="project[tags][]" value="table">
    
    
    <input type="hidden" name="project[files][src/polyfills.ts]" value="/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called &#34;evergreen&#34; browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
 * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */


/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import &#39;zone.js&#39;;  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import &#39;@angular/localize/init&#39;;
">
    
    <input type="hidden" name="project[files][tsconfig.json]" value="{
  &#34;compileOnSave&#34;: false,
  &#34;compilerOptions&#34;: {
    &#34;baseUrl&#34;: &#34;./&#34;,
    &#34;outDir&#34;: &#34;./dist/out-tsc&#34;,
    &#34;sourceMap&#34;: true,
    &#34;declaration&#34;: false,
    &#34;downlevelIteration&#34;: true,
    &#34;experimentalDecorators&#34;: true,
    &#34;module&#34;: &#34;esnext&#34;,
    &#34;moduleResolution&#34;: &#34;node&#34;,
    &#34;importHelpers&#34;: true,
    &#34;target&#34;: &#34;es2015&#34;,
    &#34;typeRoots&#34;: [
      &#34;node_modules/@types&#34;
    ],
    &#34;lib&#34;: [
      &#34;es2018&#34;,
      &#34;dom&#34;
    ]
  },
  &#34;angularCompilerOptions&#34;: {
    &#34;enableIvy&#34;: true,
    &#34;fullTemplateTypeCheck&#34;: true,
    &#34;strictTemplates&#34;: true,
    &#34;strictInjectionParameters&#34;: true
  }
}
">
    
    <input type="hidden" name="project[files][angular.json]" value="{
  &#34;version&#34;: 1,
  &#34;newProjectRoot&#34;: &#34;projects&#34;,
  &#34;projects&#34;: {
    &#34;demo&#34;: {
      &#34;root&#34;: &#34;&#34;,
      &#34;sourceRoot&#34;: &#34;src&#34;,
      &#34;projectType&#34;: &#34;application&#34;,
      &#34;prefix&#34;: &#34;app&#34;,
      &#34;schematics&#34;: {},
      &#34;architect&#34;: {
        &#34;build&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:browser&#34;,
          &#34;options&#34;: {
            &#34;outputPath&#34;: &#34;dist/demo&#34;,
            &#34;index&#34;: &#34;src/index.html&#34;,
            &#34;main&#34;: &#34;src/main.ts&#34;,
            &#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
            &#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
            &#34;assets&#34;: [
            ],
            &#34;styles&#34;: [
            ],
            &#34;scripts&#34;: []
          },
          &#34;configurations&#34;: {
            &#34;production&#34;: {
              &#34;fileReplacements&#34;: [
                {
                }
              ],
              &#34;optimization&#34;: true,
              &#34;outputHashing&#34;: &#34;all&#34;,
              &#34;sourceMap&#34;: false,
              &#34;extractCss&#34;: true,
              &#34;namedChunks&#34;: false,
              &#34;aot&#34;: true,
              &#34;extractLicenses&#34;: true,
              &#34;vendorChunk&#34;: false,
              &#34;buildOptimizer&#34;: true
            }
          }
        },
        &#34;serve&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:dev-server&#34;,
          &#34;options&#34;: {
            &#34;browserTarget&#34;: &#34;demo:build&#34;
          },
          &#34;configurations&#34;: {
            &#34;production&#34;: {
              &#34;browserTarget&#34;: &#34;demo:build:production&#34;
            }
          }
        },
        &#34;extract-i18n&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:extract-i18n&#34;,
          &#34;options&#34;: {
            &#34;browserTarget&#34;: &#34;demo:build&#34;
          }
        },
        &#34;test&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:karma&#34;,
          &#34;options&#34;: {
            &#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
            &#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
            &#34;styles&#34;: [
            ],
            &#34;scripts&#34;: [],
            &#34;assets&#34;: [
            ]
          }
        },
        &#34;lint&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:tslint&#34;,
          &#34;options&#34;: {
            &#34;tsConfig&#34;: [
              &#34;tsconfig.json&#34;
            ],
            &#34;exclude&#34;: [
              &#34;**/node_modules/**&#34;
            ]
          }
        }
      }
    }
  },
  &#34;defaultProject&#34;: &#34;demo&#34;
}
">
    
    <input type="hidden" name="project[files][src/index.html]" value="&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;ng-bootstrap table demo - complete&lt;/title&gt;
  &lt;link rel=&#34;stylesheet&#34;
    href=&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css&#34; /&gt;
  &lt;style&gt;
    /* Datepicker popup icon */

button.calendar, button.calendar:active {
  width: 2.75rem;
  background-image: url(&#39;&#39;) !important;
  background-repeat: no-repeat;
  background-size: 23px;
  background-position: center;
}

/* Sortable table demo */

th[sortable] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

th[sortable].desc:before, th[sortable].asc:before {
  content: &#39;&#39;;
  display: block;
  background: url(&#39;&#39;) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  float: left;
  margin-left: -22px;
}

th[sortable].desc:before {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
  background-color: yellow;
}

/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
  background-color: yellow;
}

ngb-carousel .picsum-img-wrapper {
  position: relative;
  height: 0;
  padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .picsum-img-wrapper&gt;img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&#34;container-fluid&#34;&gt;

    &lt;hr&gt;

    &lt;p&gt;
      This is a demo example forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
      Visit &lt;a href=&#34;https://ng-bootstrap.github.io/&#34; target=&#34;_blank&#34;&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more
      widgets and demos.
    &lt;/p&gt;

    &lt;hr&gt;
    &lt;ngbd-table-complete&gt;&lt;/ngbd-table-complete&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
">
    
    <input type="hidden" name="project[files][src/main.ts]" value="import &#39;./polyfills&#39;;

import {platformBrowserDynamic} from &#39;@angular/platform-browser-dynamic&#39;;

import {NgbdTableCompleteModule} from &#39;./app/table-complete.module&#39;;

platformBrowserDynamic()
    .bootstrapModule(NgbdTableCompleteModule)
    .then(ref =&gt; {
      // Ensure Angular destroys itself on hot reloads.
      if (window[&#39;ngRef&#39;]) {
        window[&#39;ngRef&#39;].destroy();
      }
      window[&#39;ngRef&#39;] = ref;

      // Otherwise, log the boot error
    })
    .catch(err =&gt; console.error(err));
">
    
    <input type="hidden" name="project[files][src/app/countries.ts]" value="import {Country} from &#39;./country&#39;;

export const COUNTRIES: Country[] = [
  {
    id: 1,
    name: &#39;Russia&#39;,
    flag: &#39;f/f3/Flag_of_Russia.svg&#39;,
    area: 17075200,
    population: 146989754
  },
  {
    id: 2,
    name: &#39;France&#39;,
    flag: &#39;c/c3/Flag_of_France.svg&#39;,
    area: 640679,
    population: 64979548
  },
  {
    id: 3,
    name: &#39;Germany&#39;,
    flag: &#39;b/ba/Flag_of_Germany.svg&#39;,
    area: 357114,
    population: 82114224
  },
  {
    id: 4,
    name: &#39;Portugal&#39;,
    flag: &#39;5/5c/Flag_of_Portugal.svg&#39;,
    area: 92090,
    population: 10329506
  },
  {
    id: 5,
    name: &#39;Canada&#39;,
    flag: &#39;c/cf/Flag_of_Canada.svg&#39;,
    area: 9976140,
    population: 36624199
  },
  {
    id: 6,
    name: &#39;Vietnam&#39;,
    flag: &#39;2/21/Flag_of_Vietnam.svg&#39;,
    area: 331212,
    population: 95540800
  },
  {
    id: 7,
    name: &#39;Brazil&#39;,
    flag: &#39;0/05/Flag_of_Brazil.svg&#39;,
    area: 8515767,
    population: 209288278
  },
  {
    id: 8,
    name: &#39;Mexico&#39;,
    flag: &#39;f/fc/Flag_of_Mexico.svg&#39;,
    area: 1964375,
    population: 129163276
  },
  {
    id: 9,
    name: &#39;United States&#39;,
    flag: &#39;a/a4/Flag_of_the_United_States.svg&#39;,
    area: 9629091,
    population: 324459463
  },
  {
    id: 10,
    name: &#39;India&#39;,
    flag: &#39;4/41/Flag_of_India.svg&#39;,
    area: 3287263,
    population: 1324171354
  },
  {
    id: 11,
    name: &#39;Indonesia&#39;,
    flag: &#39;9/9f/Flag_of_Indonesia.svg&#39;,
    area: 1910931,
    population: 263991379
  },
  {
    id: 12,
    name: &#39;Tuvalu&#39;,
    flag: &#39;3/38/Flag_of_Tuvalu.svg&#39;,
    area: 26,
    population: 11097
  },
  {
    id: 13,
    name: &#39;China&#39;,
    flag: &#39;f/fa/Flag_of_the_People%27s_Republic_of_China.svg&#39;,
    area: 9596960,
    population: 1409517397
  }
];
">
    
    <input type="hidden" name="project[files][src/app/country.service.ts]" value="/* eslint-disable @typescript-eslint/adjacent-overload-signatures */
import {Injectable, PipeTransform} from &#39;@angular/core&#39;;

import {BehaviorSubject, Observable, of, Subject} from &#39;rxjs&#39;;

import {Country} from &#39;./country&#39;;
import {COUNTRIES} from &#39;./countries&#39;;
import {DecimalPipe} from &#39;@angular/common&#39;;
import {debounceTime, delay, switchMap, tap} from &#39;rxjs/operators&#39;;
import {SortColumn, SortDirection} from &#39;./sortable.directive&#39;;

interface SearchResult {
  countries: Country[];
  total: number;
}

interface State {
  page: number;
  pageSize: number;
  searchTerm: string;
  sortColumn: SortColumn;
  sortDirection: SortDirection;
}

const compare = (v1: string | number, v2: string | number) =&gt; v1 &lt; v2 ? -1 : v1 &gt; v2 ? 1 : 0;

function sort(countries: Country[], column: SortColumn, direction: string): Country[] {
  if (direction === &#39;&#39; || column === &#39;&#39;) {
    return countries;
  } else {
    return [...countries].sort((a, b) =&gt; {
      const res = compare(a[column], b[column]);
      return direction === &#39;asc&#39; ? res : -res;
    });
  }
}

function matches(country: Country, term: string, pipe: PipeTransform) {
  return country.name.toLowerCase().includes(term.toLowerCase())
    || pipe.transform(country.area).includes(term)
    || pipe.transform(country.population).includes(term);
}

@Injectable({providedIn: &#39;root&#39;})
export class CountryService {
  private _loading$ = new BehaviorSubject&lt;boolean&gt;(true);
  private _search$ = new Subject&lt;void&gt;();
  private _countries$ = new BehaviorSubject&lt;Country[]&gt;([]);
  private _total$ = new BehaviorSubject&lt;number&gt;(0);

  private _state: State = {
    page: 1,
    pageSize: 4,
    searchTerm: &#39;&#39;,
    sortColumn: &#39;&#39;,
    sortDirection: &#39;&#39;
  };

  constructor(private pipe: DecimalPipe) {
    this._search$.pipe(
      tap(() =&gt; this._loading$.next(true)),
      debounceTime(200),
      switchMap(() =&gt; this._search()),
      delay(200),
      tap(() =&gt; this._loading$.next(false))
    ).subscribe(result =&gt; {
      this._countries$.next(result.countries);
      this._total$.next(result.total);
    });

    this._search$.next();
  }

  get countries$() { return this._countries$.asObservable(); }
  get total$() { return this._total$.asObservable(); }
  get loading$() { return this._loading$.asObservable(); }
  get page() { return this._state.page; }
  get pageSize() { return this._state.pageSize; }
  get searchTerm() { return this._state.searchTerm; }

  set page(page: number) { this._set({page}); }
  set pageSize(pageSize: number) { this._set({pageSize}); }
  set searchTerm(searchTerm: string) { this._set({searchTerm}); }
  set sortColumn(sortColumn: SortColumn) { this._set({sortColumn}); }
  set sortDirection(sortDirection: SortDirection) { this._set({sortDirection}); }

  private _set(patch: Partial&lt;State&gt;) {
    Object.assign(this._state, patch);
    this._search$.next();
  }

  private _search(): Observable&lt;SearchResult&gt; {
    const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;

    // 1. sort
    let countries = sort(COUNTRIES, sortColumn, sortDirection);

    // 2. filter
    countries = countries.filter(country =&gt; matches(country, searchTerm, this.pipe));
    const total = countries.length;

    // 3. paginate
    countries = countries.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
    return of({countries, total});
  }
}
">
    
    <input type="hidden" name="project[files][src/app/country.ts]" value="export interface Country {
  id: number;
  name: string;
  flag: string;
  area: number;
  population: number;
}
">
    
    <input type="hidden" name="project[files][src/app/sortable.directive.ts]" value="import {Directive, EventEmitter, Input, Output} from &#39;@angular/core&#39;;
import {Country} from &#39;./country&#39;;

export type SortColumn = keyof Country | &#39;&#39;;
export type SortDirection = &#39;asc&#39; | &#39;desc&#39; | &#39;&#39;;
const rotate: {[key: string]: SortDirection} = { &#39;asc&#39;: &#39;desc&#39;, &#39;desc&#39;: &#39;&#39;, &#39;&#39;: &#39;asc&#39; };

export interface SortEvent {
  column: SortColumn;
  direction: SortDirection;
}

@Directive({
  selector: &#39;th[sortable]&#39;,
  host: {
    &#39;[class.asc]&#39;: &#39;direction === &#34;asc&#34;&#39;,
    &#39;[class.desc]&#39;: &#39;direction === &#34;desc&#34;&#39;,
    &#39;(click)&#39;: &#39;rotate()&#39;
  }
})
export class NgbdSortableHeader {

  @Input() sortable: SortColumn = &#39;&#39;;
  @Input() direction: SortDirection = &#39;&#39;;
  @Output() sort = new EventEmitter&lt;SortEvent&gt;();

  rotate() {
    this.direction = rotate[this.direction];
    this.sort.emit({column: this.sortable, direction: this.direction});
  }
}
">
    
    <input type="hidden" name="project[files][src/app/table-complete.html]" value="&lt;p&gt;This is a more complete example with a service that simulates server calling:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;an observable async service to fetch a list of countries&lt;/li&gt;
  &lt;li&gt;sorting, filtering and pagination&lt;/li&gt;
  &lt;li&gt;simulated delay and loading indicator&lt;/li&gt;
  &lt;li&gt;debouncing of search requests&lt;/li&gt;
&lt;/ul&gt;

&lt;form&gt;
  &lt;div class=&#34;mb-3 row&#34;&gt;
    &lt;label for=&#34;table-complete-search&#34; class=&#34;col-xs-3 col-sm-auto col-form-label&#34;&gt;Full text search:&lt;/label&gt;
    &lt;div class=&#34;col-xs-3 col-sm-auto&#34;&gt;
      &lt;input id=&#34;table-complete-search&#34; type=&#34;text&#34; class=&#34;form-control&#34; name=&#34;searchTerm&#34; [(ngModel)]=&#34;service.searchTerm&#34;&gt;
    &lt;/div&gt;
    &lt;span class=&#34;col col-form-label&#34; *ngIf=&#34;service.loading$ | async&#34;&gt;Loading...&lt;/span&gt;
  &lt;/div&gt;

  &lt;table class=&#34;table table-striped&#34;&gt;
    &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&#34;col&#34;&gt;#&lt;/th&gt;
      &lt;th scope=&#34;col&#34; sortable=&#34;name&#34; (sort)=&#34;onSort($event)&#34;&gt;Country&lt;/th&gt;
      &lt;th scope=&#34;col&#34; sortable=&#34;area&#34; (sort)=&#34;onSort($event)&#34;&gt;Area&lt;/th&gt;
      &lt;th scope=&#34;col&#34; sortable=&#34;population&#34; (sort)=&#34;onSort($event)&#34;&gt;Population&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr *ngFor=&#34;let country of countries$ | async&#34;&gt;
      &lt;th scope=&#34;row&#34;&gt;{{ country.id }}&lt;/th&gt;
      &lt;td&gt;
        &lt;img [src]=&#34;&#39;https://upload.wikimedia.org/wikipedia/commons/&#39; + country.flag&#34; class=&#34;me-2&#34; style=&#34;width: 20px&#34;&gt;
        &lt;ngb-highlight [result]=&#34;country.name&#34; [term]=&#34;service.searchTerm&#34;&gt;&lt;/ngb-highlight&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;ngb-highlight [result]=&#34;country.area | number&#34; [term]=&#34;service.searchTerm&#34;&gt;&lt;/ngb-highlight&gt;&lt;/td&gt;
      &lt;td&gt;&lt;ngb-highlight [result]=&#34;country.population | number&#34; [term]=&#34;service.searchTerm&#34;&gt;&lt;/ngb-highlight&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

  &lt;div class=&#34;d-flex justify-content-between p-2&#34;&gt;
    &lt;ngb-pagination
      [collectionSize]=&#34;(total$ | async)!&#34; [(page)]=&#34;service.page&#34; [pageSize]=&#34;service.pageSize&#34;&gt;
    &lt;/ngb-pagination&gt;

    &lt;select class=&#34;form-select&#34; style=&#34;width: auto&#34; name=&#34;pageSize&#34; [(ngModel)]=&#34;service.pageSize&#34;&gt;
      &lt;option [ngValue]=&#34;2&#34;&gt;2 items per page&lt;/option&gt;
      &lt;option [ngValue]=&#34;4&#34;&gt;4 items per page&lt;/option&gt;
      &lt;option [ngValue]=&#34;6&#34;&gt;6 items per page&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;

&lt;/form&gt;
">
    
    <input type="hidden" name="project[files][src/app/table-complete.module.ts]" value="import { CommonModule } from &#39;@angular/common&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule, ReactiveFormsModule } from &#39;@angular/forms&#39;;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgbModule } from &#39;@ng-bootstrap/ng-bootstrap&#39;;

import { NgbdSortableHeader } from &#39;./sortable.directive&#39;;
import { NgbdTableComplete } from &#39;./table-complete&#39;;

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule
  ],
  declarations: [NgbdTableComplete, NgbdSortableHeader],
  exports: [NgbdTableComplete],
  bootstrap: [NgbdTableComplete]
})
export class NgbdTableCompleteModule {}
">
    
    <input type="hidden" name="project[files][src/app/table-complete.ts]" value="import {DecimalPipe} from &#39;@angular/common&#39;;
import {Component, QueryList, ViewChildren} from &#39;@angular/core&#39;;
import {Observable} from &#39;rxjs&#39;;

import {Country} from &#39;./country&#39;;
import {CountryService} from &#39;./country.service&#39;;
import {NgbdSortableHeader, SortEvent} from &#39;./sortable.directive&#39;;


@Component(
    {selector: &#39;ngbd-table-complete&#39;, templateUrl: &#39;./table-complete.html&#39;, providers: [CountryService, DecimalPipe]})
export class NgbdTableComplete {
  countries$: Observable&lt;Country[]&gt;;
  total$: Observable&lt;number&gt;;

  @ViewChildren(NgbdSortableHeader) headers: QueryList&lt;NgbdSortableHeader&gt;;

  constructor(public service: CountryService) {
    this.countries$ = service.countries$;
    this.total$ = service.total$;
  }

  onSort({column, direction}: SortEvent) {
    // resetting other headers
    this.headers.forEach(header =&gt; {
      if (header.sortable !== column) {
        header.direction = &#39;&#39;;
      }
    });

    this.service.sortColumn = column;
    this.service.sortDirection = direction;
  }
}
">
    
  </form>
  <script>document.getElementById("mainForm").submit();</script>
</body>

</html>
